import React, { FC } from "react"
import { Typography } from "antd"
import { QuestionInfoPropsType, QuestionInfoDefaultProps } from "./interface"

const { Title, Paragraph } = Typography

const QuestionInfo: FC<QuestionInfoPropsType> = (props: QuestionInfoPropsType) => {
    const { title = "", desc = "" } = { ...QuestionInfoDefaultProps, ...props }

    // 实现换行
    const descTextList = desc?.split("\n")
    const content = descTextList.map((t, index) => {
        return (
            <span key={index}>
                {index > 0 && <br />}
                {t}
            </span>
        )
    })

    return (
        <div style={{ textAlign: "center" }}>
            <Title style={{ fontSize: "24px" }}>{title}</Title>
            <Paragraph>{content}</Paragraph>
        </div>
    )
}

export default QuestionInfo
